<template>
	<view class="page" style="padding-top: 104rpx;">
		<view class="header">
			<image @click="back" class="back" src="../../static/tian/back.png" mode=""></image>
			<view class="text">{{$t('first.title126')}}</view>
			<view></view>
		</view>
		<view class="daolist_up">
			<view class="up_up">
				<image v-if="lang == 'ft'" class="icon1" src="../../static/tian/zh.png" mode=""></image>
				<image v-if="lang == 'en'" class="icon1" src="../../static/tian/en.png" mode=""></image>
				<image v-if="lang == 'ja'" class="icon1" src="../../static/tian/ja.png" mode=""></image>
				<image class="icon" src="../../static/tian/level.png" mode=""></image>
			</view>
		</view>
		<view class="daolist_down">
			<view class="down_title">{{$t('first.title127')}}</view>
			
			<!-- <view class="item">
				<view>{{$t('first.title128')}}</view>
				<view>123123</view>
				<view>{{$t('first.title129')}}{{$t('first.title130')}}</view>
				<view>1231221</view>
			</view> -->
			<view class="thead">
				<view class="thead_item" style="color: #999;">{{$t('first.title127')}}</view>
				<view class="thead_item" style="color: #999;">{{$t('wallet.address')}}</view>
				<!-- <view class="thead_item" style="color: #999;">{{$t('first.title34')}}</view> -->
				<view class="thead_item" style="color: #999;">{{$t('first.title131')}}</view>
			</view>
			<view class="thead" v-for="(item,index) in detailist" :key="index">
				<view class="thead_item" v-if="index < 3">
					<image v-if="index == 0" src="../../static/tian/1.png" class="icon" mode=""></image>
					<image v-if="index == 1" src="../../static/tian/2.png" class="icon" mode=""></image>
					<image v-if="index == 2" src="../../static/tian/3.png" class="icon" mode=""></image>
				</view>
				<view v-if="index >= 3" class="thead_item">{{index + 1}}</view>
				<view class="thead_item">{{item.address.substring(0,3)}}****{{item.address.substr(-3)}}</view>
				<!-- <view class="thead_item">1231</view> -->
				<view class="thead_item">{{item.team}}</view>
			</view>
			<view class="nodata" style="margin-top: 200rpx;" v-if="detailist.length == 0">
				<image class="icon" src="../../static/tian/zanwu.png" mode=""></image>
				<view class="nodata_text">{{$t('first.title44')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		domain
	} from '../../config/domain.js'
	export default{
		data(){
			return{
				detailist:[],
				lang:'ft'
			}
		},
		onLoad() {
			this.lang = localStorage.getItem('lang')
			this.getlist()
		},
		methods:{
			getlist(){
				var url = domain + 'api/user/ranks';
				var mytype = 'get';
				var userinfo = uni.getStorageSync('userinfo');
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':userinfo.token,
					},
					success: res => {
						if(res.data.code==0){
							uni.showToast({
								icon:'none',
								title:res.data.msg
							}); 
						}else{
							this.detailist=res.data.data
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
				// this.$utils.initDataToken({
				// 	url: 'diamond_finance/logList',
				// 	type: 'post'
				// }, (res, msg) => {
					
				// });
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.page{
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #ecf0f5;
	}
	.header{
		width: 100%;
		height: 104rpx;
		padding: 20rpx;
		position: fixed;
		background-color: #ecf0f5;
		display: flex;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}
	.back{
		width: 48rpx;
		height: 48rpx;
	}
	.header .text{
		font-size: 36rpx;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 600;
		color: #222;
	}
	.daolist_up{
		width: 100%;
		min-height: 572rpx;
		background: linear-gradient(154deg,#ffdc96,#ffb30a);
		padding: 40rpx 40rpx 80rpx 40rpx;
		box-sizing: border-box;
	}
	.up_up{
		display: flex;
	}
	.up_up .icon1{
		width: 300rpx;
		height: 80rpx;
		margin-right: 40rpx;
		margin-top: 44rpx;
	}
	.up_up .icon{
		width: 440rpx;
		height: 360rpx;
	}
	.up_down{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: -70rpx;
	}
	.personlist{
		width: 100%;
		min-height: 158rpx;
		background: #fff;
		box-shadow: 0 0.18667rem 0.42667rem 0 rgb(0 0 0 / 8%);
		border-radius: 36rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		margin-top: 20rpx;
	}
	.personlist .num{
		font-size: 36rpx;
		font-family: DINAlternate-Bold,DINAlternate;
		font-weight: 700;
		color: #0c0c0c;
		margin-bottom: 20rpx;
		word-wrap: break-word;
	}
	.downleft{
		font-size: 24rpx;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 400;
		color: #909090;
	}
	.downright{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 108rpx;
		height: 88rpx;
	}
	.daolist_down{
		margin-top: -204rpx;
		width: 100%;
		background: #fff;
		box-shadow: 0 0.26667rem 0.66667rem 0 #f1f4f6;
		border-radius: 60rpx 60rpx 0 0;
		padding: 40rpx;
		box-sizing: border-box;
		min-height: 938rpx;
		position: relative;
		z-index: 10;
	}
	.down_title{
		font-size: 40rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		margin-bottom: 40rpx;
	}
	.nodata{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.nodata .icon{
		width: 420rpx;
		height: 366rpx;
	}
	.nodata_text{
		font-size: 28rpx;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 400;
		color: #9394bc;
	}
	.item{
		width: 100%;
		height: 146rpx;
		background: #f9e9c9;
		box-shadow: 0 0.18667rem 0.42667rem 0 rgb(0 0 0 / 8%);
		border-radius: 32rpx;
		margin-bottom: 40rpx;
		padding: 36rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #ffb30a;
	}
	.thead{
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		box-sizing: border-box;
	}
	.thead_item{
		width: 25%;
		min-height: 86rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		font-size: 24rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #222;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.thead .icon{
		width: 50rpx;
		height: 50rpx;
	}
</style>